<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: black;
        }
        body:hover{
            cursor: none;
        }
        #fush{
            /* border: 1px solid black; */
            width: 300px;
            height: 150px;
            margin: auto;
            position: absolute;
            top: 50%;
            left: 25%;
            transform: translateY(-50%);
            user-select: none;
            transition-property: height;
            transition-duration: 100ms;
        }
        #fush:hover{
            cursor:none;
        }
        
        
    
        #a{
            /* border: 1px solid black; */
            height: 100%;
            width: 60%;
            border-radius: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 8;

            background-color: #9e8358;
        }
        #b{
            /* border: 1px solid black; */
            position: absolute;
            top: 34%;
            right: 4%;
            width: 60%;
            height: 33%;
            rotate: 30deg;

            box-shadow: 3px 3px 3px black;


            background-color: #9e8358;
        }
        #c{
            /* border: 1px solid black; */
            position: absolute;
            right: 0px;
            bottom: 0px;
            height: 38%;
            width: 75%;
            border-radius: 28%;

            box-shadow: 3px 3px 3px black;

            background-color: #9e8358;
        }
        #d{
            /* border: 1px solid black; */
            position: absolute;
            left: 1%;
            top: 49%;
            width: 28%;
            height: 3%;
            border-radius: 10px;
            z-index: 10;

            background-color: white;
        }
        .info{
            position: absolute;
            left: 25%;
            top: -30%;
            font-size: 30px;
            transition-property: top;
            transition-duration: 1s;
            color: wheat;
        }
        #plotform{
            position: fixed;   
            left: 0px;
            top: 40vh;
            height: 20vh;
            width: 100vw;
        }
        #gun{
            width: 300px;
            height: 20px;
            background-color: #fbd9a1;
            border-radius: 8px;
            display: inline-block;
            position: fixed;
            rotate: 30deg;
            z-index: 10;
            transition-property: rotate;
            transition-duration: 100ms;
        }
        
        
      
    </style>
</head>
<body>
    <div id="gun">

    </div>

    <div id="plotform"></div>
    <div id="fush" onclick="qiao()">
        <div id="a">
        </div>
        <div id="b">
        </div>
        <div id="c">
        </div>
        <div id="d"></div>
    </div>
    <script>
        var fush = document.getElementById('fush');
        var plotform = document.getElementById('plotform');
        var gun = document.getElementById('gun');
        document.onmousemove = function(e){
            var y = e.clientY;
            var x = e.clientX;
            gun.style.top = y + 'px'
            gun.style.left = x + 'px'
        }
        
        function qiao(){
            fush.style.height = '170px'
            gun.style.rotate = '0deg';
            setTimeout(() => {
                fush.style.height = '150px'
                gun.style.rotate = '30deg';
                //加功德
                var div = document.createElement('div');
                div.innerText = '功德 + 1';
                div.className = 'info';
                plotform.appendChild(div);
                setTimeout(()=>{
                    div.style.top = '-180%'
                    setTimeout(()=>{
                        plotform.removeChild(div)
                    },1000)
                },80)
            },100)

            
        }
    </script>
</body>
</html>